<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baidu</title>
</head>
<body>
<center>
<input type="text" id="search">
<div id="show"></div>
</center>
<script type="text/javascript">
	window.onload = function(){
		var searchInput = document.getElementById("search");
		var showDiv = document.getElementById("show");
		
		searchInput.oninput = function(){
		showDiv.innerHTML = "";
		var likeName = searchInput.value;
		if (likeName&&likeName!="") {
			getAreas(likeName);
			
		}
		
	}

	function getAreas(likeName){
		var xhr = new XMLHttpRequest();
		var url = "http://localhost:8080/baidu/area/all?likeName="+searchInput.value;
		console.log(url);
		xhr.open("GET",url);
		xhr.onreadystatechange = function(){
			if (xhr.status==200&&xhr.readyState==4) {
				var areas = JSON.parse(xhr.responseText);
				showArea(areas);
			}
		};	
		xhr.send();

	}
		
		function showArea (areas){
			areas.forEach(function(item){
			var p = document.createElement("p");
			p.innerHTML = item.name;
			showDiv.appendChild(p);
			})
		}
	}

</script>

</body>
</html>